<script setup lang="ts">
import { computed } from 'vue'
import { seoConfig } from '~/config/seo'

useSeoMeta({
  title: seoConfig.solutions.title,
  description: seoConfig.solutions.description,
  keywords: seoConfig.solutions.keywords
})

// 行业痛点场景
const industries = [
  {
    id: 'internet',
    name: '互联网行业',
    icon: 'lucide:globe',
    color: 'from-blue-500 to-cyan-500',
    bgColor: 'bg-blue-50',
    painPoints: [
      {
        title: '用户隐私安全问题',
        description: '用户数据泄露风险高，需要安全可靠的实名认证体系',
        icon: 'lucide:shield-alert',
        solution: '提供多重实名认证服务，保障用户隐私安全'
      },
      {
        title: '办公系统繁多',
        description: '多系统割裂，信息孤岛严重，影响工作效率',
        icon: 'lucide:layout-grid',
        solution: '统一通讯平台，集成多系统，提升协同效率'
      },
      {
        title: '企业宣传成本高',
        description: '传统宣传方式成本高，触达率低，效果难衡量',
        icon: 'lucide:trending-up',
        solution: '精准营销短信服务，降低成本，提高ROI'
      }
    ]
  },
  {
    id: 'finance',
    name: '金融行业',
    icon: 'lucide:landmark',
    color: 'from-purple-500 to-pink-500',
    bgColor: 'bg-purple-50',
    painPoints: [
      {
        title: '缺乏风控',
        description: '风险识别能力弱，容易产生欺诈行为',
        icon: 'lucide:shield-x',
        solution: '多维度实名认证，活体检测，有效防范风险'
      },
      {
        title: '拓展率低',
        description: '获客成本高，用户转化率低，业务增长缓慢',
        icon: 'lucide:user-x',
        solution: '一键登录SDK，降低注册门槛，提升转化率'
      },
      {
        title: '合规压力大',
        description: '监管要求严格，实名制落实困难',
        icon: 'lucide:file-warning',
        solution: '对接权威数据源，满足监管合规要求'
      }
    ]
  },
  {
    id: 'ecommerce',
    name: '电商行业',
    icon: 'lucide:shopping-cart',
    color: 'from-green-500 to-emerald-500',
    bgColor: 'bg-green-50',
    painPoints: [
      {
        title: '推广范围窄',
        description: '营销渠道单一，难以触达潜在客户',
        icon: 'lucide:target',
        solution: '多渠道营销短信，精准触达目标用户'
      },
      {
        title: '广告到达率低',
        description: '传统广告投放效果差，用户参与度低',
        icon: 'lucide:trending-down',
        solution: '图片/视频短信，富媒体展示，提升转化'
      },
      {
        title: '订单通知不及时',
        description: '物流信息推送延迟，影响用户体验',
        icon: 'lucide:clock-alert',
        solution: '实时短信通知，极速送达，提升体验'
      }
    ]
  },
  {
    id: 'logistics',
    name: '物流行业',
    icon: 'lucide:truck',
    color: 'from-orange-500 to-red-500',
    bgColor: 'bg-orange-50',
    painPoints: [
      {
        title: '货物通知',
        description: '货物状态更新不及时，客户体验差',
        icon: 'lucide:package',
        solution: '自动化短信通知，实时推送物流信息'
      },
      {
        title: '物流跟踪',
        description: '物流信息查询困难，客服压力大',
        icon: 'lucide:map-pin',
        solution: '短信+链接，方便查询，减轻客服负担'
      },
      {
        title: '用户验证',
        description: '取件验证环节繁琐，效率低下',
        icon: 'lucide:key',
        solution: '验证码短信，快速验证，提升效率'
      }
    ]
  }
]

// 合作伙伴
const partners = [
  { name: '大麦网', logo: '/home/partners/11.png', industry: '互联网行业', products: '通知、会员营销短信、视频短信' },
  { name: '迈驰', logo: '/home/partners/12.png', industry: '制造行业', products: '通知、验证码短信、物联网卡、IDC服务' },
  { name: '信息创业园', logo: '/home/partners/13.png', industry: '物业管理', products: '通知、验证码短信、会员营销短信、视频短信' },
  { name: '汇聚商务', logo: '/home/partners/14.png', industry: '电商行业', products: '验证码短信、实名认证、行为验证码' },
  { name: '小家电商城', logo: '/home/partners/15.png', industry: '电商行业', products: '通知短信、营销短信、物流短信' },
  { name: '放心商务', logo: '/home/partners/16.png', industry: '电商行业', products: '通知短信、验证码短信、营销短信' },
  { name: '金彩传媒', logo: '/home/partners/17.png', industry: '娱乐行业', products: '验证码短信、实名认证、OCR识别' },
  { name: '金融证券', logo: '/home/partners/18.png', industry: '金融行业', products: '物联网卡、通知短信、验证码短信' }
]

const activeIndustry = ref('internet')

// 当前选中的行业
const currentIndustry = computed(() => {
  return industries.find(ind => ind.id === activeIndustry.value)!
})
</script>

<template>
  <div class="min-h-screen">
    <!-- 顶部横幅 -->
    <section class="relative bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 py-20 md:py-28" style="background-image: url('/bg_solutions.png'); background-size: cover; background-position: center;">
      <div class="relative mx-auto px-4 max-w-6xl">
        <div class="text-center max-w-3xl mx-auto">
          <h1 class="text-4xl md:text-5xl lg:text-5xl mb-4 text-gray-900" style="font-weight: 900;">
            行业解决方案
          </h1>
          <p class="text-ls md:text-lg text-gray-700 leading-relaxed">
            针对不同行业特点，提供专业的通讯解决方案<br/>助力企业数字化转型，解决核心业务痛点
          </p>
        </div>
      </div>
    </section>

    <!-- 行业选择标签 -->
    <section class="py-8 bg-white border-b border-gray-200 shadow-sm">
      <div class="mx-auto px-4 max-w-6xl">
        <div class="flex flex-wrap justify-center gap-4">
          <button
            v-for="industry in industries"
            :key="industry.id"
            @click="activeIndustry = industry.id"
            class="px-6 py-3 rounded-lg font-semibold transition-all"
            :class="activeIndustry === industry.id 
              ? 'bg-blue-600 text-white shadow-md'
              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
          >
            {{ industry.name }}
          </button>
        </div>
      </div>
    </section>

    <!-- 行业痛点场景 -->
    <section class="py-16 md:py-24 bg-gray-50">
      <div class="mx-auto px-4 max-w-6xl">
        <Transition
          enter-active-class="transition-all duration-300 ease-out"
          enter-from-class="opacity-0 translate-y-4"
          enter-to-class="opacity-100 translate-y-0"
          leave-active-class="transition-all duration-200 ease-in"
          leave-from-class="opacity-100 translate-y-0"
          leave-to-class="opacity-0 -translate-y-4"
          mode="out-in"
        >
          <div :key="activeIndustry">
            <div class="text-center mb-12">
              <div class="inline-flex items-center gap-3 mb-4">
                <h2 class="text-2xl md:text-4xl font-bold text-gray-900">
                  {{ currentIndustry.name }}痛点与解决方案
                </h2>
              </div>
              <p class="text-lg text-gray-600">
                深入理解行业痛点，提供针对性解决方案
              </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
              <div
                v-for="(point, index) in currentIndustry.painPoints"
                :key="index"
                :class="['group relative bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl transition-all', currentIndustry.bgColor, 'border-2 border-transparent hover:border-current']"
              >
                <!-- 痛点 -->
                <div class="mb-6">
                  <h3 class="text-xl font-bold text-gray-900 mb-2">
                    {{ point.title }}
                  </h3>
                  <p class="text-gray-600 text-sm leading-relaxed">
                    {{ point.description }}
                  </p>
                </div>

                <!-- 分隔线 -->
                <div class="border-t-2 border-dashed border-gray-200 my-6"></div>

                <!-- 解决方案 -->
                <div>
                  <div class="flex items-center gap-2 mb-2">
                    <Icon name="lucide:check-circle" :class="['w-5 h-5', currentIndustry.color.includes('blue') ? 'text-blue-500' : currentIndustry.color.includes('purple') ? 'text-purple-500' : currentIndustry.color.includes('green') ? 'text-green-500' : 'text-orange-500']" />
                    <h4 class="font-semibold text-gray-900">解决方案</h4>
                  </div>
                  <p class="text-gray-700 text-sm leading-relaxed">
                    {{ point.solution }}
                  </p>
                </div>

                <!-- 悬停效果箭头 -->
                <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
                  <Icon name="lucide:arrow-up-right" :class="['w-6 h-6', currentIndustry.color.includes('blue') ? 'text-blue-500' : currentIndustry.color.includes('purple') ? 'text-purple-500' : currentIndustry.color.includes('green') ? 'text-green-500' : 'text-orange-500']" />
                </div>
              </div>
            </div>
          </div>
        </Transition>
      </div>
    </section>

    <!-- 合作伙伴 -->
    <section class="py-16 md:py-24 bg-white">
      <div class="mx-auto px-4 max-w-6xl">
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            合作伙伴
          </h2>
          <p class="text-lg text-gray-600">
            我们与众多知名企业建立深度合作关系
          </p>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
          <div
            v-for="(partner, index) in partners"
            :key="index"
            class="group bg-gray-50 rounded-2xl p-6 hover:shadow-lg transition-all hover:scale-105 cursor-pointer"
          >
            <div class="aspect-square flex items-center justify-center mb-4 bg-white rounded-xl p-4">
              <img 
                :src="partner.logo" 
                :alt="partner.name"
                class="w-full h-full object-contain transition-all"
                loading="lazy"
              />
            </div>
            <div class="text-center">
              <h3 class="font-bold text-gray-900 mb-1">{{ partner.name }}</h3>
              <p class="text-xs text-gray-500 mb-2">{{ partner.industry }}</p>
              <!-- <div class="text-xs text-gray-600 leading-relaxed">
                <strong>合作产品：</strong>
                <br/>{{ partner.products }}
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA 部分 -->
    <CallToAction />
  </div>
</template>
